<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .app {
            width: 210px;
            height: auto;
            /* outline: 2px solid red; */
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .single {
            width: 100px;
            height: auto;
            margin-bottom: 8px;
            /* outline: 2px solid green; */
        }

        .single img {
            width: 100px;
            height: 100px;
        }

        .single p:nth-of-type(1) {
            font-size: 14px;
            line-height: 10px;
        }

        .single p:nth-of-type(2) {
            font-size: 12px;
            color: orangered;
            /* line-height: 10px; */
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="app">
            <my-cpn v-for="item in list" :key="item.id" :msg="item" @clickdata="getSonData">
            </my-cpn>
        </div>
        <p>点击的是 <span style="font-size: 18px;font-weight:600;color:red;">{{ clickedData }}</span></p>
    </div>
    <script src="./js/vue.js"></script>

    <template id="myCpn">
        <div class="single" @click="clickData">
            <img :src="msg.imgUrl" alt="">
            <p>{{ msg.name }}</p>
            <p>{{ msg.price | newPrice }}</p>
        </div>
    </template>

    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    list: [{
                            id: 1,
                            name: "手机1",
                            imgUrl: "./image/手机.jpg",
                            price: 2500
                        },
                        {
                            id: 2,
                            name: "手机2",
                            imgUrl: "./image/手机2.jpg",
                            price: 2900
                        },
                        {
                            id: 3,
                            name: "手表1",
                            imgUrl: "./image/手表.png",
                            price: 500
                        },
                        {
                            id: 4,
                            name: "手表2",
                            imgUrl: "./image/手表(1).png",
                            price: 900
                        },
                        {
                            id: 5,
                            name: "音响1",
                            imgUrl: "./image/音响(1).png",
                            price: 1500
                        }
                    ],
                    clickedData: null
                }
            },
            methods: {
                getSonData(val) {
                    this.clickedData = val
                }
            },
            components: {
                'my-cpn': {
                    template: '#myCpn',
                    props: ['msg'],
                    data() {
                        return {

                        }
                    },
                    methods: {
                        clickData() {
                            this.$emit('clickdata', this.msg.name);
                        }
                    },
                    filters: {
                        newPrice(val) {
                            return '￥' + val.toFixed(2) + '元';
                        }
                    }
                }

            }
        })
    </script>
</body>

</html>